<template>
  <div class="admin">
    <!-- 顶部 -->
    <div class="top">
      <!-- 顶部左边切换 -->
      <el-button-group class="group">
        <!-- <el-button type="primary" class="admin-list">管理员列表</el-button> -->
        <el-button
          v-for="(item, index) in list"
          :key="item"
          type="primary"
          class="admin-change"
          :class="{ bgc: num === index }"
          @click="change(index)"
        >
          {{ item }}
        </el-button>
        <!-- 顶部中间搜索框 -->
        <el-input
          v-model="input"
          class="w-50 m-2"
          placeholder="请输入你搜索的内容"
          :prefix-icon="Search"
          @keyup.enter="search"
        />
      </el-button-group>
      <!-- 顶部右侧添加按钮 -->
      <el-button size="large" class="add-btn" @click="dialogFormVisible = true">
        <span class="add">+</span>
        添加管理员
      </el-button>
      <!-- 弹出遮罩层和添加框 -->
      <el-dialog v-model="dialogFormVisible" title="添加管理员信息">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input
              v-model="form.name"
              autocomplete="off"
              type="text"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <div>
              <el-radio v-model="form.sex" label="1" size="small">男</el-radio>
              <el-radio v-model="form.sex" label="2" size="small">女</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input
              v-model="form.tel"
              autocomplete="off"
              type="tel"
              placeholder="请输入电话号码"
              max-length="11"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
            <el-input
              v-model="form.email"
              autocomplete="off"
              type="email"
              placeholder="请输入邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="添加日期" :label-width="formLabelWidth">
            <div class="block">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="请选择一个日期"
              >
              </el-date-picker>
            </div>
            <!-- <el-input v-model="form.date" autocomplete="off"></el-input> -->
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="add">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <router-view />
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
export default {
  setup() {
    const router = useRouter();
    const store = useStore();
    const list = ref(["管理员列表", "管理员权限调整"]);
    const input = ref("");
    const num = ref(0);
    const radio = ref("1");

    console.log(router);
    //添加管理员相关数据
    let dialogFormVisible = ref(false);
    const formLabelWidth = "140px";
    const form = reactive({
      name: "",
      sex: "",
      tel: "",
      email: "",
      date: "",
    });
    // 添加管理员方法
    const add = () => {
      dialogFormVisible.value = false;
      const addList = ref({});
      addList.value.id = new Date().getTime();
      addList.value.name = form.name;
      addList.value.sex = +form.sex;
      addList.value.tel = form.tel;
      addList.value.email = form.email;
      addList.value.date = form.date.toLocaleDateString().split("/").join("-");
      addList.value.value = 0;
      console.log(addList.value);
      store.dispatch("addDataAsync", addList.value);
    };
    // 搜索功能
    const search = () => {
      console.log(input.value);
      store.dispatch("searchDataAsync", { value: input.value });
      console.log(list);
    };
    // 点击切换路由
    const change = (i) => {
      num.value = i;
      if (i === 0) {
        router.push("/index/admin/list");
      } else {
        router.push("/index/admin/manage");
      }
    };
    return {
      Search,
      input,
      list,
      change,
      num,
      dialogFormVisible,
      formLabelWidth,
      form,
      add,
      radio,
      search,
    };
  },
};
</script>

<style lang="less" scoped>
.admin {
  position: relative;
  margin-right: 37px;
  // margin-bottom: 22px;
  width: 100%;
  // height: 100%;
  // background-color: pink;
  // 顶部
  .top {
    // position: absolute;
    // left: 0;
    // top: 0;
    height: 42px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px;
    // 左侧
    .group {
      width: 289px;
      height: 100%;
      display: flex;

      .admin-list {
        height: 100%;
        width: 127px;
        color: #646364;
        background-color: #fff;
        border: none;
      }
      .admin-change {
        height: 100%;
        // flex: 1;
        color: #646364;
        background-color: #fff;
        border: none;
      }
      .bgc {
        background-color: #d9e2c8;
      }
      // 搜索
      .el-input {
        width: 267px;
        margin-left: 99px;
        transform: translateX();
        /deep/.el-input__prefix {
          font-weight: 900;
          color: #646364;
        }
        /deep/.el-input__inner {
          width: 267px;
          height: 100%;
        }
      }
    }

    // 右侧
    .add-btn {
      width: 151px;
      height: 100%;
      background-color: #d9e2c8;
      display: flex;
      justify-content: space-between;
      .add {
        width: 28px;
        height: 28px;
        background-color: #fff;
        font-size: 20px;
        line-height: 28px;
        color: #646364;
        margin-right: 20px;
        border-radius: 5px;
      }
    }
  }
  // 添加管理员数据弹出框
  .el-button--text {
    margin-right: 15px;
  }
  .el-select {
    width: 300px;
  }
  .el-input {
    width: 300px;
  }
  .dialog-footer button:first-child {
    margin-right: 10px;
  }
}
</style>
